<template>
  <div class="about-container">
    <el-card class="about-card">
      <template #header>
        <div class="card-header">
          <span>关于系统</span>
        </div>
      </template>
      <div class="about-content">
        <div class="system-info">
          <h2>Vue3 Element Admin</h2>
          <p class="version">版本 1.0.0</p>
          <p class="description">一个基于 Vue3、Element Plus、Vue Router 和 Pinia 构建的现代化管理系统模板</p>
        </div>
        
        <div class="tech-stack">
          <h3>技术栈</h3>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(tech, index) in techStack" :key="index">
              <el-card class="tech-card" :shadow="'hover'">
                <div class="tech-icon">{{ tech.icon }}</div>
                <div class="tech-name">{{ tech.name }}</div>
                <div class="tech-desc">{{ tech.desc }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <div class="features">
          <h3>系统特点</h3>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(feature, index) in features" :key="index">
              <el-card class="feature-card">
                <el-icon :size="24">{{ getFeatureIcon(feature.icon) }}</el-icon>
                <h4>{{ feature.title }}</h4>
                <p>{{ feature.description }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
        
        <div class="contact-info">
          <h3>联系我们</h3>
          <el-descriptions border :column="{ xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }")>
            <el-descriptions-item label="项目地址">
              <a href="#" target="_blank" class="link">https://github.com/example/vue3-element-admin</a>
            </el-descriptions-item>
            <el-descriptions-item label="文档地址">
              <a href="#" target="_blank" class="link">https://docs.example.com</a>
            </el-descriptions-item>
            <el-descriptions-item label="联系邮箱">
              <a href="mailto:support@example.com" class="link">support@example.com</a>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useUserStore } from '../stores/user'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 定义组件名称
defineOptions({
  name: 'About'
})

const userStore = useUserStore()

// 技术栈数据
const techStack = [
  {
    icon: '🖥️',
    name: 'Vue 3',
    desc: '渐进式 JavaScript 框架'
  },
  {
    icon: '📱',
    name: 'Element Plus',
    desc: '基于 Vue 3 的桌面端组件库'
  },
  {
    icon: '🧭',
    name: 'Vue Router',
    desc: 'Vue.js 官方路由'
  },
  {
    icon: '📦',
    name: 'Pinia',
    desc: 'Vue 的存储库'
  },
  {
    icon: '⚡',
    name: 'Vite',
    desc: '下一代前端构建工具'
  },
  {
    icon: '📊',
    name: 'Chart.js',
    desc: '简单灵活的 JavaScript 图表库'
  }
]

// 系统特点数据
const features = [
  {
    icon: 'el-icon-refresh-left',
    title: '响应式设计',
    description: '适配各种屏幕尺寸，提供良好的用户体验'
  },
  {
    icon: 'el-icon-shield',
    title: '权限管理',
    description: '完整的权限控制系统，支持多级权限管理'
  },
  {
    icon: 'el-icon-rocket',
    title: '性能优化',
    description: '代码分割、懒加载等多种性能优化手段'
  },
  {
    icon: 'el-icon-edit-outline',
    title: '丰富组件',
    description: '内置丰富的业务组件，快速开发业务功能'
  },
  {
    icon: 'el-icon-table-lamp',
    title: 'TypeScript 支持',
    description: '完整的 TypeScript 类型定义'
  },
  {
    icon: 'el-icon-data-line',
    title: '状态管理',
    description: '基于 Pinia 的现代化状态管理'
  }
]

// 获取功能图标组件
const getFeatureIcon = (iconName) => {
  return ElementPlusIconsVue[iconName] || ElementPlusIconsVue.InfoFilled
}

// 组件挂载时检查登录状态
onMounted(() => {
  // 加载用户信息
  userStore.loadUserInfo()
})
</script>

<style scoped>
.about-container {
  width: 100%;
}

.about-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about-content {
  padding: 20px 0;
}

.system-info {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.system-info h2 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.version {
  font-size: 16px;
  color: #409eff;
  margin-bottom: 10px;
}

.description {
  font-size: 16px;
  color: #606266;
}

.tech-stack,
.features,
.contact-info {
  margin-bottom: 40px;
}

.tech-stack h3,
.features h3,
.contact-info h3 {
  font-size: 20px;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e6f7ff;
}

.tech-card {
  text-align: center;
  transition: all 0.3s;
}

.tech-card:hover {
  transform: translateY(-5px);
}

.tech-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.tech-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.tech-desc {
  font-size: 14px;
  color: #606266;
}

.feature-card {
  padding: 20px;
  text-align: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-card .el-icon {
  color: #409eff;
  margin-bottom: 10px;
}

.feature-card h4 {
  font-size: 16px;
  color: #303133;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.link {
  color: #409eff;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}
</style>